<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <style>
    svg {
      background-color: #eee;
    }
  </style>
</head>

<body>
  <svg id='svg' width="600" height='400'>
    <defs id='defs'>
      
    </defs>
    <g stroke='blue' stroke-width='2' fill='none'>
      <!-- 编写x轴和y轴 -->
      <!-- x轴 -->
      <line x1=50 y1=350 x2=550 y2=350></line>
      <line x1=550 y1=350 x2=530 y2=340></line>
      <line x1=550 y1=350 x2=530 y2=360></line>

      <!-- y轴 -->
      <path d="M50,350 L50,50 L60,70 L50,50 L40,70"></path>
    </g>


  </svg>

  <!-- 
    重点在 算 xy坐标

    创造柱  rect标签
    document.createElementNS('http://www.w3.org/2000/svg','rect')
    document.createElement('rect')
    创造完成之后 通过 appenChild添加到svg中


    创造文本 text

   -->
</body>

</html>
<script>
  var data = [
    {
      "department": "部门1",
      "value": 250
    },
    {
      "department": "部门2",
      "value": 470
    },
    {
      "department": "部门3",
      "value": 200
    },
    {
      "department": "部门4",
      "value": 180
    },
    {
      "department": "部门5",
      "value": 100
    },
    {
      "department": "部门6",
      "value": 340
    }
  ];
  
  let svg = document.getElementById('svg')
  // 算出 柱的宽度 和 柱的缝隙
  let colw,space;
  space = 500/(3 * data.length + 1);
  colw = space * 2;
  // 获取最大值
  let max = 0;
  for(let i = 0; i < data.length; i++){
    if(data[i].value > max){
      max = data[i].value
    }
  }
  //根据最大值 和  y轴的高度  算出一个比例
  let percent = Math.ceil((max+50)/300);
  // 每一个柱的高度 就是  value/percent

  // 根据数据去画柱
  let fragment = document.createDocumentFragment();// 创造一个文档碎片
  for(let i = 0; i < data.length; i++){
    let obj = data[i];
    let w = colw, h = obj.value/percent;// 宽高
    // rect的起始坐标
    let x = 50 + space*(i+1) + colw*i, // x轴坐标
        y = 300 + 50 - h - 1; // y轴坐标
    // 创造一个渐变色
    let color = getColor();

    let leanerGr = `
        <linearGradient id="MyGradient${i}" x1='0' y1="100%"  x2='0' y2='0'>
          <stop offset="0%"  stop-color="${color}" stop-opacity='0.1'/>
          <stop offset="100%" stop-color="${color}" stop-opacity='0.8'/>
        </linearGradient>
      ` ;
      defs.innerHTML += leanerGr;
    // c创造柱  rect
    let rect = document.createElementNS('http://www.w3.org/2000/svg','rect')  
    rect.setAttribute('x',x)  
    rect.setAttribute('y',y) 
    rect.setAttribute('width',w) 
    rect.setAttribute('height',h) 
    rect.setAttribute('fill',`url(#MyGradient${i})`)
    fragment.appendChild(rect)

    // 创造x轴文本
    let text = document.createElementNS('http://www.w3.org/2000/svg','text')
    text.innerHTML = obj.department;
    text.setAttribute('x',x)
    text.setAttribute('y',y + h + 20)
    fragment.appendChild(text)
    console.log(text.getBoundingClientRect())

    // 创造柱上的文本
    let text2 = document.createElementNS('http://www.w3.org/2000/svg','text')
    text2.innerHTML = obj.value;
    text2.setAttribute('x',x)
    text2.setAttribute('y',y-5)
    fragment.appendChild(text2)
  }
  svg.appendChild(fragment)
  // 让文字居中
  // 让文字在本身的x值的基础上再移动宽度差的一半即可
  let texts = svg.getElementsByTagName('text');
  for(let i = 0 ; i < texts.length; i++){
    let w = texts[i].getBoundingClientRect().width/1;
    let x = texts[i].getAttribute('x')/1;
    texts[i].setAttribute('x',x +(colw - w)/2)
  }

  function getColor(){
    let r = Math.floor(Math.random()*256);
    let g = Math.floor(Math.random()*256);
    let b = Math.floor(Math.random()*256);
    return `rgb(${r},${g},${b})`
  }




  
</script>